<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 1px solid #999;
        }
        td{
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <button type="button" onclick="add_line1()">添加一行</button>
    <button type="button" onclick="remove()">删除任意的</button>
    <button type="button" onclick="remove_line()">删除最后一行</button>
    <div id="outer">
        <table>
            <tr>
                <td><input  type="checkbox" id="cks" onclick="select_all(this)"></td>
                <td>1</td>
                <td></td>
                <td><a href="#" onclick="del(this)">del</a></td>
            </tr>
        </table>
    </div>
    <script>
        function add_line() {
            let tbody = document.querySelector("#outer>table>tbody");
            
            let count = tbody.lastElementChild.lastElementChild.previousElementSibling.previousElementSibling.innerHTML;
            
            let tr = document.createElement("tr");

            let t = document.createElement("td");

            let input =document.createElement("input");

            //设置对象的属性
            input.type = 'checkbox';
            input.name = 'ck';

            //input绑定到第一个t
            t.appendChild(input);

            tr.appendChild(t);

            for(let i = 0;i < 2;i++){
                let td = document.createElement("td");
                tr.appendChild(td);
            }

            let t1 = document.createElement("td");

            let a = document.createElement("a");

            a.href = '#';
            //a.onclick = function del(this);
            a.innerHTML = 'del'

            t1.appendChild(a)

            tr.appendChild(t1);

            tbody.appendChild(tr);
        }
        function add_line1() {
            let tbody = document.querySelector("#outer>table>tbody");

            let count = tbody.lastElementChild.lastElementChild.previousElementSibling.previousElementSibling.innerHTML;

            let old = tbody.innerHTML;

            let str = `<tr><td><input  type="checkbox" name="ck"></td><td>${++count}</td><td></td><td><a href="#" onclick="del(this)">del</a></td></tr>`

            old += str;

            tbody.innerHTML = old;
        }
        function remove_line() {
            let tbody = document.querySelector("#outer>table>tbody");

            if(tbody.lastElementChild.lastElementChild.previousElementSibling.previousElementSibling.innerHTML==1) {
                alert("sorry,不能再删除了!");
                return;
            }

            let last = tbody.lastElementChild;

            tbody.removeChild(last);
        }
        //删除指定行
        function del(obj) {
            //removeChild

            //拿到a标签所在的tr标签
            let tbody = document.querySelector("#outer>table>tbody");
            
            if(obj.parentElement.previousElementSibling.previousElementSibling.innerHTML==1) {
                alert("sorry,不能删除此行!");
                return;
            }
            
            tbody.removeChild(obj.parentElement.parentElement);
        }
        //全选和全不选
        function select_all(obj) {
            //所有的ck
            let cks = document.getElementsByName("ck");

            if(obj.checked) {
                for(let i=0;i<cks.length;i++) {
                    cks[i].checked = true;
                }
            } else {
                for(let i=0;i<cks.length;i++) {
                    cks[i].checked = false;
                }
            }
        }
        function remove() {
            let cks = document.getElementsByName("ck");
            let tbody = document.querySelector("#outer>table>tbody");

            let count = 0;
            
            let arr = [];

            for(let i=0;i<cks.length;i++) {
                if(cks[i].checked) {
                    count++;
                    arr.push(cks[i]);
                }
            }
            if(count==0) {
                alert("sorry,请先勾选商品!");
                return;
            }

            //确认框, 确认返回true, 不确认返回false
            let flag = confirm("确认删除吗?");
            if(flag) {
                for(let i=0;i<arr.length;i++) {
                    tbody.removeChild(arr[i].parentElement.parentElement);
                } 
            }
        }
    </script>
</body>
</html>